<div class="tab-pane" id="hosts-panel">
    <aw-limit-panels max-panels="2" panel-container="hosts-panel"></aw-limit-panels>
    <div ui-view="form"></div>
    <div class="card at-Panel">
        <div class="row Form-tabRow">
            <div class="col-lg-12">
                <div class="Form-tabHolder">
                    <div class="Form-tab " ng-click="$state.go('inventories')" translate>INVENTORIES</div>
                    <div class="Form-tab is-selected" ng-click="$state.go('hosts')" translate>HOSTS</div>
                </div>
            </div>
        </div>
        <div>
            <div class="List-actionHolder List-actionHolder--leftAlign">
                <div class="List-actions">
                    <div ng-include="'/static/partials/shared/list-generator/list-actions.partial.html'"></div>
                </div>
            </div>
            <div ng-hide="hosts.length === 0 && (searchTags | isEmpty)">
                <smart-search
                    django-model="hosts"
                    search-size="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                    single-search-param="host_filter"
                    base-path="hosts"
                    iterator="host"
                    dataset="host_dataset"
                    list="list"
                    collection="hosts"
                    default-params="host_default_params"
                    query-set="host_queryset"
                    search-tags="searchTags">
                </smart-search>
            </div>

            <div class="row" ng-show="hosts.length === 0 && !(searchTags | isEmpty)">
                <div class="col-lg-12 List-searchNoResults" translate>No records matched your search.</div>
            </div>
            <div class="List-noItems" ng-show="hosts.length === 0 && (searchTags | isEmpty)" translate>NO HOSTS HAVE BEEN CREATED</div>
            <div class="list-table-container" ng-show="hosts.length > 0">
                <div id="hosts_table" class="List-table table-no-border">
                    <div class="List-staticColumnLayout--hosts List-tableHeaderRow">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div class="d-flex h-100">
                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-4" query-set="host_queryset"></div>
                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-4 ellipsis" query-set="host_queryset"></div>
                            <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-4 text-right" translate>Actions</div>
                        </div>
                    </div>
                    <div class="List-staticColumnLayout--hosts List-tableRow" ng-repeat="host in hosts track by host.id">
                            <div></div>
                            <div class="List-tableCell toggleHost-column List-staticColumn--toggle">
                                <div class="ScheduleToggle" ng-class="{'is-on': host.enabled, 'ScheduleToggle--disabled': host.has_inventory_sources}" aw-tool-tip="{{strings.get('hostList.DISABLED_TOGGLE_TOOLTIP')}}" data-placement="right" data-tip-watch="undefined">
                                    <button ng-disabled="host.has_inventory_sources" ng-show="host.enabled" class="ScheduleToggle-switch is-on" ng-click="toggleHost($event, host)" translate>ON</button>
                                    <button ng-disabled="host.has_inventory_sources" ng-show="!host.enabled" class="ScheduleToggle-switch" ng-click="toggleHost($event, host)" translate>OFF</button>
                                </div>
                            </div>
                            <div class="List-tableCell active_failures-column status-column List-staticColumn--smallStatus">
                                <div class="host-name">
                                    <a href="" ng-click="noop()" aw-tool-tip="{{ host.badgeToolTip }}" aw-pop-over="{{ host.job_status_html }}" data-placement="top" over-title="{{ host.job_status_title }}">
                                        <i class="fa {{ 'fa icon-job-' + host.active_failures }}"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="d-flex h-100">
                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-4">
                                    <div class="host-name">
                                        <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
                                    </div>
                                </div>
                                <div class="List-tableCell inventory_name-column col-lg-4 elllipsis">
                                    <div class="host-name">
                                        <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
                                    </div>
                                </div>
                                <div class="List-actionsContainer col-lg-4">
                                    <div class="List-actionButtonCell List-tableCell">
                                        <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_INSIGHTS')}}" data-tip-watch="strings.get('inventory.VIEW_INSIGHTS')" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
                                            <i class="fa fa-info"></i>
                                        </button>
                                        <button id="edit-action" class="List-actionButton " ng-class="{'List-editButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit') }" data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="{{strings.get('inventory.EDIT_HOST')}}"   data-tip-watch="strings.get('inventory.VIEW_HOST')" ng-show="host.summary_fields.user_capabilities.edit">
                                            <i class="fa fa-pencil"></i>
                                        </button>
                                        <button id="view-action" class="List-actionButton " data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_HOST')}}" data-tip-watch="strings.get('inventory.VIEW_HOST')" ng-show="!host.summary_fields.user_capabilities.edit"><i class="fa fa-search-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- table container -->
            <paginate
                base-path="hosts"
                collection="hosts"
                dataset="host_dataset"
                iterator="host"
                query-set="host_queryset">
            </paginate>
        </div>
    </div>
</div>
